<template>
    <!--预约块：width:<768 	超小屏幕 手机 xs 手机端隐藏-->
    <div class="ce_subscribe">
        <div class="container">
            <!--<div class="row">
                <div class="col-sm-9">
                    <span class="ce_icon ce_icon_E906"></span>
                    <span>现在已有1089家门店入驻联盟商家，累计交易2869次</span>
                    <a href="javascript:;"> 什么是联盟商家</a>
                    <a href="javascript:;" class="joinBoss">立即加入</a>
                </div>
                <div class="col-sm-3">
                    <span class="ce_icon ce_icon_E905"></span>
                    <a href="javascript:;">亚盟电商平台宣传片</a>
                </div>
            </div>-->
            <div class="m_hort">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="tab-tag">
                        <a href="javascript:;" class="leftMoreA" role="tab" data-toggle="tab">
                            <span class="leftMoreS glyphicon glyphicon-fire"></span>{{MATERIAL_RECOMMEND.HOT_VIDEO.value}}
                        </a>

                    </li>
                    <li role="presentation" class="tab-tag">
                        <a href="javascript:;" class="rightMoreA" role="tab" data-toggle="tab" @click="toMaterial">
                            更多<span class="rightMoreS glyphicon glyphicon-forward"></span>
                        </a>
                    </li>

                </ul>
                <div class="tab-pane">
                    <el-row>
                        <el-col class="pane-col" :lg="6" :md="8" :sm="8" :xs="12"
                                v-for="(item,index) in materialHotList"
                                :key="index">
                            <el-card class="pane-box" :body-style="{ padding: '0px' }" shadow="hover">
                                <div class="videoImg">
                                    <img :src="item.videoCover" class="pane-img img-responsive">
                                </div>

                                <div class="optionBtn" style="padding: 14px;">
                                    <span class="title">{{item.name}}</span>
                                    <div class="bottom clearfix">
                                        <time class="desc">
                                            {{item.seoDescription}}
                                        </time>
                                        <el-button class="downButton showVideo" type="primary" @click="openVideo(item)"><span
                                                class="glyphicon glyphicon-fullscreen"></span>预览
                                        </el-button>
                                        <el-button class="downButton downVideo" type="primary" @click="downVideo(item.uniId,item.video)"><span
                                                class="glyphicon glyphicon-save"></span>下载
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <dialog-player ref="ossDialogPlayer"></dialog-player>
            </div>
        </div>
    </div>
</template>

<script>
    import DialogPlayer from "../../components/DialogPlayer";
    export default {
        name: "MainSubscribe",
        components:{DialogPlayer},
        data(){
            return{
                materialHotList:[],
                MATERIAL_RECOMMEND:MATERIAL_RECOMMEND,
            }
        },
        mounted() {
            this.getWidth();
            this.getHotMaterial();
        },
        methods:{
            getWidth() {

                let videoBtn = document.getElementsByClassName("downButton");
                let wid = $(window).width();
                if(wid<768){
                    for (let i = 0; i < videoBtn.length; i++) {
                        videoBtn[i].style.fontSize = "10px";
                        videoBtn[i].style.padding = "5px 7px";
                    }
                }
                $(window).on("resize", function () {
                    let wid = $(window).width();
                    if (wid >= 768) {
                        //添加元素
                        console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
                    } else if (wid < 768) {
                        for (let i = 0; i < videoBtn.length; i++) {
                            videoBtn[i].style.fontSize = "10px";
                            videoBtn[i].style.padding = "5px 7px";
                        }
                    }
                }).trigger("resize");

            },
            //6.获取热门素材列表
            getHotMaterial() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/material/hot').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.materialHotList = resp.responseData;
                    }
                });
            },
            openVideo(item) {
                this.$nextTick(() => {
                    let url = item.video;
                    let title = item.name;
                    let coverPic = item.videoCover;
                    this.$refs.ossDialogPlayer.playerURL(url, title, coverPic);
                });
            },
            downVideo(uniId,url) {
                let token=Tool.getEmpLogin().token;
                let suffix=url.substring(url.lastIndexOf(".")+1,url.length).toLowerCase();
                axios({
                    method:'post',
                    //url:item.video,
                    url:process.env.VUE_APP_SERVER+'/business/client/module/material/download/'+uniId+"/"+suffix,
                    responseType:'blob',
                    headers:{
                        token:token,
                    }
                }).then((response)=>{

                    let blob=new Blob();
                    if (suffix==="ppt" || suffix==="pptx" ){
                        blob=new Blob([response.data],{type:'application/vnd.ms-powerpoint'});
                    }else if(suffix==="mp4"){
                        blob=new Blob([response.data],{type:'video/mpeg4'});
                    }else if(suffix==="zip"){
                        blob=new Blob([response.data],{type:'application/x-zip-compressed'});
                    }

                    let responseContentName=response.headers["content-disposition"].split(";")[1].split("filename=")[1];
                    let fileName=decodeURIComponent(responseContentName);
                    let link=document.createElement("a");
                    link.style.display="none";
                    link.href=URL.createObjectURL(blob);
                    link.setAttribute('download',fileName);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }).catch(error => {
                    console.log(error)
                });
            },
            toMaterial(){
              this.$router.push("/materials/list");
            },
        },
    }
</script>

<style scoped>
    /*预约块样式*/
    .ce_subscribe{
        height: 100%;
        line-height: 60px;
        border-top: 1px solid #ccc;
        margin-bottom: 20px;
    }
    .ce_subscribe .ce_icon{
        font-size: 18px;
        margin-right: 10px;
    }
    .joinBoss{
        margin-left: 5px;
        color: #e92322;
        border-bottom: 1px dashed #e92322;
    }
    .ce_subscribe a:hover{
        text-decoration: none;
        border-bottom: unset;
        color: #e92322;
    }

    /*热门视频*/
    .m_hort {
        padding: 20px 10px 0;
        clear: both;
    }

    .m_hort .nav-tabs {

        padding: 0 20px;
        border-bottom: 0;
        cursor: pointer;
    }

    .m_hort .nav-tabs .tab-tag.active a, .m_hort .nav-tabs .tab-tag:hover a {
        border-bottom: 0;
        background: transparent;
    }

    .m_hort .nav-tabs li.active a,
    .m_hort .nav-tabs li:hover a {
        border: none;
        border-radius: 0;
        background: transparent;
        color: black;
        font-weight: bolder;
        border-bottom: 0;
    }

    .m_hort .nav-tabs .tab-tag:first-of-type {
        float: left;
    }

    .m_hort .nav-tabs .tab-tag:last-of-type {
        float: right;
    }

    .m_hort .nav-tabs .tab-tag .leftMoreS {
        float: left;
        line-height: 25px;
        font-size: 20px;
        margin-right: 10px;
        color: #e92322;
    }

    .m_hort .nav-tabs .tab-tag .leftMoreA {
        font-size: 20px;
        font-weight: bolder;
        color: black;
        position: relative;
    }

    .m_hort .nav-tabs .tab-tag .rightMoreS {
        float: right;
        line-height: 25px;
        font-size: 20px;
        margin-left: 10px;
        color: #e92322;
    }

    .m_hort .nav-tabs .tab-tag .rightMoreA {
        font-size: 20px;
        font-weight: bolder;
        color: black;
        position: relative;
    }

    /*热门列表*/
    .m_hort .tab-pane {
        margin: 20px 10px 0;
        height: 100%;
    }

    /*card内容*/
    .tab-content {
        margin: 20px auto;
    }

    .tab-pane .pane-col .pane-box {
        border-radius: 10px;
        max-width: 270px;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
    }

    .tab-pane .pane-col .pane-box .videoImg {
        max-height: 150px;
        overflow: hidden;
    }

    .tab-pane .pane-col .pane-box:hover img,
    .tab-pane .pane-col .pane-box:focus img {
        transform: scale(1.1);
        /*margin-top: -3px;
        display: inline-block;*/
    }

    .tab-pane .pane-col .pane-box img {
        transition: 500ms;
    }

    .tab-pane .pane-col .pane-box div .title {
        font-size: 16px;
        line-height: 20px;
        color: #545C63;
    }

    .tab-pane .pane-col .pane-box div .desc {
        font-size: 14px;
        line-height: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #a8a2a2;
    }

    .tab-pane .pane-col .pane-box div .showVideo {
        margin-top: 15px;
        float: left;
        padding: 10px 15px;
        background: #2797cb;
        border: 0;
    }

    .tab-pane .pane-col .pane-box div .showVideo:hover,
    .tab-pane .pane-col .pane-box div .showVideo:focus {
        background: #2db2ef;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    }

    .tab-pane .pane-col .pane-box div .showVideo span {
        margin-right: 5px;
    }

    .tab-pane .pane-col .pane-box div .downVideo {
        margin-top: 15px;
        float: right;
        padding: 10px 15px;
        background: #e95022;
        border: 0;
    }

    .tab-pane .pane-col .pane-box div .downVideo:hover,
    .tab-pane .pane-col .pane-box div .downVideo:focus {
        background: #f86337;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    }

    .tab-pane .pane-col .pane-box div .downVideo span {
        margin-right: 5px;
    }

    .tab-pane .pane-col .pane-box div {
        text-align: center;
    }

    .tab-pane .pane-col .pane-box div .downPlane {
        padding: 10px 50px;
        margin-top: 15px;
        background: #e95022;
        border: 0;
    }

    .tab-pane .pane-col .pane-box div .downPlane:hover,
    .tab-pane .pane-col .pane-box div .downPlane:focus {
        background: #f86337;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    }

    .tab-pane .pane-col .pane-box div .downPlane span {
        margin-right: 10px;
    }
</style>